import React, { useEffect, useRef } from 'react';
import { Line as G2Line, Column as G2Column } from '@antv/g2plot';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Row, Col, Statistic } from 'antd';
import * as echarts from 'echarts';
import { ArrowUpOutlined, ArrowDownOutlined, UserOutlined, ShoppingCartOutlined, FileTextOutlined, TeamOutlined } from '@ant-design/icons';

const Welcome: React.FC = () => {
  const lineChartRef = useRef<HTMLDivElement>(null);
  const barChartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 折线图配置
    if (lineChartRef.current) {
      const lineChart = echarts.init(lineChartRef.current);
      lineChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147],
          type: 'line',
          smooth: true
        }]
      });
    }

    // 柱状图配置
    if (barChartRef.current) {
      const barChart = echarts.init(barChartRef.current);
      barChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      });
    }

    // 响应式处理
    window.addEventListener('resize', () => {
      lineChartRef.current && echarts.getInstanceByDom(lineChartRef.current)?.resize();
      barChartRef.current && echarts.getInstanceByDom(barChartRef.current)?.resize();
    });
  }, []);

  return (
    <PageContainer>
      {/* 数据统计卡片 */}
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="总销售额"
              value={112893}
              prefix={<ShoppingCartOutlined />}
              suffix="元"
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="访问量"
              value={8846}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="订单数"
              value={2334}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card bordered={false}>
            <Statistic
              title="用户数"
              value={1234}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* 图表展示 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col span={16}>
          <Card title="销售趋势" bordered={false}>
            <div ref={lineChartRef} style={{ height: 300 }} />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="本周访问量" bordered={false}>
            <div ref={barChartRef} style={{ height: 300 }} />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Welcome;
